import { FC } from "react";
import { NewItem } from "./NewItem";
import { GarbageBin } from "./GarbageBin";
import { List } from "./List";
import classNames from "classnames"
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
interface TodoListProps {

}

const InnerTestReactDnDTodoList: FC<TodoListProps> = (props) => {

    return <div className={`
        w-1000 h-600 m-auto mt-100 p-10
        border-2 border-black
        flex justify-between items-start
    `}>
        <div className="flex-2 h-full mr-10  overflow-auto">
            <List />
        </div>

        <div className={classNames(
            "flex-1 h-full",
            "flex flex-col justify-start"
        )}>
            <NewItem />
            <GarbageBin className={"mt-10"} />
        </div>
    </div>
}

const TestReactDnDTodoList = () => {
    return <DndProvider backend={HTML5Backend}>
        <InnerTestReactDnDTodoList />
    </DndProvider>
}
export default TestReactDnDTodoList
